<template>
  <div>
    <div class="sec-workspace">
      <template v-if="operatorStatisticsList">
        <div class="workspace-title">敏感数据管理</div>
        <div class="workspace-data">
          <el-row :gutter="40">
            <el-col class="item" :span="8" :key="index" v-for="(data, index) in operatorStatisticsList">
              <div class="item-database">{{ data.sourceLabel }}</div>
              <div class="item-statistic">
                <div
                  v-for="(item, i) in operatorStatistics"
                  :key="i"
                  @click="handleJumpSensitivityPage(item, data.source)"
                  :style="'cursor: pointer'"
                  class="item-count"
                >
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-number">{{ data[item.prop] }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-if="operatorStatisticsList">
        <div class="workspace-title">风险API管理</div>
        <div class="workspace-data">
          <el-row :gutter="40">
            <el-col class="item" :span="8" :key="index" v-for="(data, index) in apiOperatorStatisticsList">
              <div class="item-database">{{ data.sourceLabel }}</div>
              <div class="item-statistic">
                <div
                  v-for="(item, i) in operatorStatistics"
                  :key="i"
                  @click="handleJumpRiskAPIPage(item, data.source)"
                  :style="'cursor: pointer'"
                  class="item-count"
                >
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-number">{{ data[item.prop] }}</div>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- <div class="item" :key="index" v-for="(data, index) in apiOperatorStatisticsList"></div> -->
        </div>
      </template>
      <template v-if="governorStatisticsList">
        <div class="workspace-title">敏感数据工单</div>
        <div class="workspace-data">
          <el-row :gutter="40">
            <el-col class="item" :span="8" :key="index" v-for="(data, index) in governorStatisticsList">
              <div class="item-database">{{ data.sourceLabel }}</div>
              <div class="item-statistic">
                <div
                  v-for="(item, i) in governorStatistics"
                  :key="i"
                  @click="handleJumpOrderPage(item, data)"
                  :style="'cursor: pointer'"
                  class="item-count"
                >
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-number">{{ data[item.prop] }}</div>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- <div class="item" v-for="(data, index) in governorStatisticsList" :key="index"></div> -->
        </div>
      </template>
      <!-- 未认领的工单 -->
      <template v-if="operatorStatisticsList">
        <div class="workspace-title">未认领的工单</div>
        <div class="workspace-data">
          <el-row :gutter="40">
            <el-col class="item" :span="8" :key="index" v-for="(data, index) in unclaimedWorkOrderList">
              <div class="item-database">{{ data.sourceLabel }}</div>
              <div class="item-statistic">
                <el-row :gutter="20" v-for="(item, i) in unclaimedWorkOrder" :key="i">
                  <div class="item-count title-left" @click="handleJumpOrderPage(item, data)">
                    <el-col class="item-title" :span="16">{{ item.title }} </el-col>
                    <el-col :span="8">
                      <div class="item-right">
                        <el-tooltip effect="dark" :content="item.tooltip" placement="right">
                          <el-button
                            size="medium"
                            style="color: #606266"
                            type="text"
                            icon="el-icon-question"
                          ></el-button>
                        </el-tooltip>
                        <div class="item-number">{{ data[item.prop] }}</div>
                      </div>
                    </el-col>
                  </div>
                </el-row>
              </div></el-col
            ></el-row
          >
          <!-- <div>
            <div class="item" v-for="(data, index) in unclaimedWorkOrderList" :key="index"></div>
          </div> -->
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getStatisticsInfoList } from "api/api";
export default {
  name: "WorkSpace",
  props: {},
  components: {},
  data() {
    return {
      operatorStatisticsList: [],
      operatorStatistics: [
        { title: "待确认数据", prop: "unconfirmedCount", workbenchType: null },
        { title: "多次验收不通过数据", prop: "checkFailCount", workbenchType: 0 },
        { title: "待验收数据", prop: "uncheckCount", workbenchType: 2 },
        { title: "超过30天未治理数据", prop: "ungoverned30DayCount", workbenchType: 1 },
      ],
      //风险api管理
      apiOperatorStatisticsList: [],

      governorStatisticsList: [],
      governorStatistics: [
        { title: "今日新增工单", prop: "newOrderCount", workbenchType: 3 },
        { title: "今日验收不通过工单", prop: "checkFailOrderCount", workbenchType: 4 },
        { title: "今日关单不通过工单", prop: "closeOrderCount", workbenchType: 5 },
        { title: "超过30天工单", prop: "order30DayCount", workbenchType: 6 },
      ],
      unclaimedWorkOrderList: [], //未认领的工单
      unclaimedWorkOrder: [
        {
          prop: "businsesUnsureOrderNum",
          title: "业务线不明确的工单",
          tooltip: "工单状态为“治理中”，且业务线为“未认领”的工单数量",
          workbenchType: 7,
        },
        {
          prop: "leaderUnsureOrderNum",
          title: "初始分配错误的工单",
          tooltip: "工单状态为“治理中”，治理人为数据安全部运营人员，且不存在工单转交记录的工单数量",
          workbenchType: 8,
        },
        {
          prop: "returnedOrderNum",
          title: "被退回的工单",
          tooltip: "工单状态为“治理中”，治理人为数据安全部运营人员，且存在工单转交记录的工单数量",
          workbenchType: 9,
        },
        {
          prop: "leaveLeaderOrderNum",
          title: "离职未转交的工单",
          tooltip: "工单状态为“治理中”，但治理人已离职的工单数量",
          workbenchType: 10,
        },
      ],
    };
  },
  mounted() {
    this.getStatisticsInfoList();
  },
  methods: {
    getStatisticsInfoList() {
      const loading = this.openLoading();
      getStatisticsInfoList({ type: "store", leader: "hanchong" })
        .then((res) => {
          const { data } = res;
          loading.close();
          this.operatorStatisticsList = data.operatorStatisticsList;
          this.apiOperatorStatisticsList = data.apiOperatorStatisticsList;
          this.governorStatisticsList = data.governorStatisticsList;
          this.unclaimedWorkOrderList = data.unclaimedWorkOrderList;
        })
        .catch(() => {
          loading.close();
        });
    },
    handleJumpRiskAPIPage(item, source) {
      this.$router.push({ path: "/govern/api", query: { type: item.workbenchType, source } });
    },
    // 敏感数据管理跳转
    handleJumpSensitivityPage(item, source) {
      this.$router.push({ path: "/govern/sensitivity", query: { type: item.workbenchType, source } });
    },
    // 敏感数据工单跳转
    handleJumpOrderPage(item, data) {
      this.$router.push({
        path: "/task/sensitivity",
        query: { type: item.workbenchType, source: data.source, tab: data.type },
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.item-right {
  display: flex;
  justify-content: space-between;
}
.title-left:not(:last-child) {
  border-bottom: 1px solid rgba(222, 222, 222, 1);
}
.sec-workspace {
  border-radius: 2px;
  margin: 20px 20px;
  padding-bottom: 20px;
  .workspace-title {
    height: 38px;
    background-color: #ff7d41;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 38px;
  }
  .workspace-title:not(:first-child) {
    // margin-top: 20px;
  }

  .workspace-data {
    margin-top: 20px;
    .item:not(:first-child) {
      // margin-left: 5%;
    }
    // .item:not(:nth-child(4n)) {
    //   margin-left: 5%;
    // }
    .item {
      margin-bottom: 20px;
      display: inline-block;
      .item-database {
        height: 38px;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
        background-color: #e4e4e4;
        line-height: 38px;
      }

      .item-count:not(:last-child) {
        border-bottom: 1px solid rgba(222, 222, 222, 1);
      }
      .item-statistic {
        background-color: #f7f7f7;
        padding: 8px 24px 8px 30px;
      }
      .item-count {
        cursor: pointer;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        font-weight: 400;
        .item-title {
          padding-left: 8px;
          display: inline-block;
        }
        .item-number {
          float: right;
          display: inline-block;
          font-weight: 600;
          padding-right: 8px;
        }
      }
    }
  }
}
</style>
